import React, { Component } from 'react';
import { Card, Button, Modal, Form, Input, Select, Tree, Transfer, message } from 'antd';
import ETable from './../../components/ETable';
import Utils from './../../utils/utils';
import axios from './../../axios';
import menuConfig from './../../config/menuConfig';

const FormItem = Form.Item;
const Option = Select.Option;
const treeMenu = [
	{
		title: "平台权限",
		key: "auth_all",
		children: menuConfig
	}
]

class Auth extends Component {
	formRef = React.createRef();
	formRefPer = React.createRef();
	formRefUser = React.createRef();
	state = {
		list: [],
		isUserVisible: false,//用户授权模态框
	}
	UNSAFE_componentWillMount(){
		axios.requestList(this,'/role',{},true)
	}
	//创建角色提交
	handleRoleSubmit=()=>{
		this.setState({
			isRoleVisible: false
		})
		let data = this.formRef.current.getFieldsValue();
		Modal.info({
			title:"获取数据成功",
			content: "角色为：" + data.role_name + "，状态为" + (data.state === 1?"开启":"关闭")
		})
		this.formRef.current.resetFields();
//		axios.ajax()提交数据
//      this.requestList()重新请求数据
	}
	
	//权限设置
	handlePermission = () => {
		let item = this.state.selectedItem;
		if(!item){
			Modal.info({
				title: "提示",
				content: "请选择一个角色"
			})
			return;
		}
		this.setState({
			isPerVisible: true,
			detailInfo: item
		})
	}
	
	//权限树选中的项保持起来
	onCheck = (checkedKeys) => {
		this.setState({
			menuInfo: checkedKeys
		})
	}
	
	//设置权限的提交
	handlePerSubmit = () => {
		let data = this.formRefPer.current.getFieldsValue();
		data.role_id = this.state.selectedItem.id;//当前设置哪一条数据肯定要知道
		data.menus = this.state.menuInfo;//还有权限数的信息也要
		//提交数据到后台
		this.setState({
			isPerVisible: false
		})
		//this.requestList();重新刷新数据
	}
	
	//用户授权
	handleUserAuth = () => {
		let item = this.state.selectedItem;
		if(!item){
			Modal.info({
				title: "提示",
				content: "请选择一个角色"
			})
			return;
		}
		this.setState({
			isUserVisible: true,
			detailInfo: item
		});
		//获取当前角色下的用户
		this.getRoleUserList(item.id);
	}
	
	//获取当前角色下面的用户列表
	getRoleUserList = (id) => {
		axios.ajax({
			url:"/user",
			method: "post",
			data: {id: id},
			isMock: true
		}).then((data)=>{
			if(data && data.result){
				this.getAuthUserList(data.result.list);
			}
		})
	}
	
	//晒选目标用户
	getAuthUserList = (dataSource) => {
		const mockData = [];
		const targetKeys = [];
		if(dataSource && dataSource.length > 0){
			for(let i = 0; i < dataSource.length; i++){
				const data = {
					key: dataSource[i].id,
					title: dataSource[i].username,
					ismubiao: dataSource[i].ismubiao
				}
				if(data.ismubiao === 1){
					targetKeys.push(data.key);
				}
				mockData.push(data);
			}
			this.setState({
				mockData,
				targetKeys
			})
		}
	}
	
	filterOption = (inputValue, option) => {
		return option.title.indexOf(inputValue) > -1;
	}
	
	//穿梭框变化时
	handleUserChange = (targetKeys) => {
		this.setState({targetKeys})
	}
	
	//用户授权/穿梭框保存提交
	handleUserSubmit = () => {
		let data = {}
		data.user_ids = this.state.targetKeys;
		data.role_id = this.state.selectedItem.id;
		//axios保存提交,再this.requestList()刷新数据
		this.setState({isUserVisible:false});
		message.success("保存成功");
	}
	
	render(){
		const columns = [
			{
				title: "角色ID",
				dataIndex: "id"
			},
			{
				title: "角色名称",
				dataIndex: "role_name"
			},
			{
				title: "创建时间",
				dataIndex: "create_time",
				render: Utils.formateDate
			},
			{
				title: "使用状态",
				dataIndex: "status",
				render(status){
					return status === 1 ? "启用": "停用";
				}
			},
			{
				title: "授权时间",
				dataIndex: "authorize_time",
				render: Utils.formateDate
			},
			{
				title: "授权人",
				dataIndex: "authorize_user_name"
			},
		]
		const layout = {
			labelCol: {
				span: 6,
			},
			wrapperCol: {
				span: 12,
			},
		};
		const tailLayout = {
			wrapperCol: {
				offset: 6,
				span: 18,
			},
		};
		const detailInfo = this.state.detailInfo;
		const menuInfo = this.state.menuInfo;
		return (
			<div style={{width: '100%'}}>
				<Card>
					<Button type="primary" onClick={()=>{this.setState({isRoleVisible: true})}}>创建角色</Button>&#x3000;
					<Button type="primary" onClick={this.handlePermission}>设置权限</Button>&#x3000;
					<Button type="primary" onClick={this.handleUserAuth}>用户授权</Button>
				</Card>
				<div className="content-wrap">
					<ETable
						updateSelectedItem={Utils.updateSelectedItem.bind(this)}
						selectedRowKeys={this.state.selectedRowKeys}
						columns={columns}
						dataSource={this.state.list}
					/>
				</div>
				<Modal
					title="创建角色"
					visible={this.state.isRoleVisible}
					onOk={this.handleRoleSubmit}
					onCancel={()=>{this.setState({isRoleVisible: false})}}
				>
					<Form
						{...layout}
						ref={this.formRef}
					>
						<FormItem name="role_name" label="角色名称">
							<Input placeholder="请输入" />
						</FormItem>
						<FormItem name="state" label="状态">
							<Select
								placeholder="请选择"
							>
								<Option value={1}>开启</Option>
								<Option value={2}>关闭</Option>
							</Select>
						</FormItem>
					</Form>
				</Modal>
				<Modal
					title="设置权限"
					visible={this.state.isPerVisible}
					width={600}
					onOk={this.handlePerSubmit}
					onCancel={()=>{this.setState({isPerVisible: false})}}
				>
					<Form
						{...layout}
						ref={this.formRefPer}
					>
						<FormItem name="role_name" label="角色名称">
							{
								detailInfo?
								<Input disabled placeholder={detailInfo.role_name} />
								:<Input />
							}
							
						</FormItem>
						<FormItem name="state" label="状态">
							<Select
								placeholder="请选择"
							>
								<Option value={1}>开启</Option>
								<Option value={2}>关闭</Option>
							</Select>
						</FormItem>
					</Form>
					<Tree
						checkable
						defaultExpandAll
						onCheck={(checkedKeys)=>{this.onCheck(checkedKeys)}}
						checkedKeys={menuInfo}
						treeData={treeMenu}
					>
					</Tree>
				</Modal>
				<Modal
					title="用户授权"
					visible={this.state.isUserVisible}
					width={600}
					onOk={this.handleUserSubmit}
					onCancel={()=>{this.setState({isUserVisible: false})}}
				>
					<Form
						{...layout}
						ref={this.formRefUser}
					>
						<FormItem name="role_name" label="角色名称">
							{
								detailInfo?
								<Input disabled placeholder={detailInfo.role_name} />
								:<Input />
							}
							
						</FormItem>
						<FormItem label="选择用户" {...tailLayout}>
							<Transfer
								listStyle={{width: 200,height: 400}}
								titles={["待选用户","已选用户"]}
								showSearch
								searchPlaceholder="输入用户名"
								dataSource={this.state.mockData}
								filterOption={this.filterOption}
								targetKeys={this.state.targetKeys}
								onChange={this.handleUserChange}
								render={item=>item.title}
							/>
						</FormItem>
					</Form>
				</Modal>
			</div>
		)
	}
}

export default Auth;